<template>
	<view class="bgf">
		<custom-nav :title="'用印文件'"></custom-nav>
		<view class="top-fixed p20">
			<view class="mt20 mb20">
				<segmented-control
					:segmentedList="segmentedList"
					:activeSegmented="activeSegmented"
					@clickItem="clickItem"
				></segmented-control>
			</view>
			<serach-button
				:placeholder="'输入文件名搜索'"
				@serachInput="serachInput"
				class="mt20"
				:value="fileName"
			>
			</serach-button>
			<!-- 筛选 -->
			<view class="df ac mt10">
				<view
					class="w50 lh80 df ac jsc c6"
					:class="item.checked ? 'g4' : ''"
					v-for="(item, index) in filterArr"
					:key="index"
					@tap="openFilter(item)"
				>
					<view class="w50 text-over tc">{{ item.name }}</view>
					<text
						class="triangle mt10 ml10"
						:class="item.checked ? 'bottom-act' : 'bottom-def'"
					>
					</text>
				</view>
			</view>
		</view>
		<view class="container f32">
			<view v-if="fileData && fileData.length > 0">
				<view
					v-for="(item, index) in fileData"
					:key="index"
					class="card-content mb20"
					@tap="previewFile(item)"
				>
					<view class="flex-between">
						<view class="c10 mb10">{{ item.fileName }}</view>
						<view class="a3">
							<text>查看</text>
							<uni-icons
								type="right"
								size="30rpx"
								color="#3A9BFF"
							></uni-icons>
						</view>
					</view>
					<view class="a9 mb10">文件类别：{{ item.fileType }}</view>
					<view class="a9 mb10">归档时间：{{ item.time }}</view>
				</view>
			</view>
			<view v-else><diy-empty></diy-empty></view>
		</view>

		<!--筛选下拉框-->
		<view v-if="filterPopupShow" class="filter-popup">
			<view class="filter-bd">
				<view :style="{ paddingTop: `calc(${navHeight}px + 320rpx)` }">
					<scroll-view
						:scroll-y="true"
						style="max-height: calc(100vh - 960rpx)"
					>
						<view
							v-if="['archiveTime'].includes(currentFilterType)"
							class="pt20"
						>
							<view class="df jsb pr20 pl20">
								<view
									class="flex-1 pl10 pr10"
									v-for="(item, index) in filterDateArr"
									:key="index"
								>
									<view
										class="tc filter-item"
										:class="
											activeDay === item.value
												? 'active-filter-item'
												: ''
										"
										@tap="choosefilterDate(item)"
									>
										{{ item.name }}
									</view>
								</view>
							</view>
							<view class="df ac pl10 pr10 mt20 data-picker-box">
								<image
									src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tdzbd6utigeypkj9g0hk8kzgk.png"
									style="width: 30rpx; height: 30rpx"
									class="ml20"
								></image>
								<uni-datetime-picker
									type="date"
									v-model="filterStartDate"
									@change="chooseStartDate"
								>
									<view
										:class="filterStartDate ? 'g3' : 'c1'"
										class="tc"
									>
										{{
											filterStartDate
												? filterStartDate
												: '开始日期'
										}}
									</view>
								</uni-datetime-picker>
								<view class="w10 tc lh80 c1 f32">至</view>
								<uni-datetime-picker
									type="date"
									v-model="filterEndDate"
									@change="chooseEndDate"
								>
									<view
										:class="filterEndDate ? 'g3' : 'c1'"
										class="tc"
									>
										{{
											filterEndDate
												? filterEndDate
												: '结束日期'
										}}
									</view>
								</uni-datetime-picker>
							</view>
						</view>
						<view
							v-if="currentFilterType === 'fileType'"
							class="grid"
						>
							<view
								class="filter-item"
								:class="
									item === activeFileType
										? 'active-filter-item'
										: ''
								"
								v-for="(item, index) in fileTypeList"
								:key="index"
								@tap="chooseFileType(item)"
							>
								{{ item }}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="filter-bottom">
					<button class="reset-button w45" @tap="filterReset">
						重置
					</button>
					<button class="primary-button w45" @tap="filterSubmit">
						确定
					</button>
				</view>
			</view>
			<view
				class="filter-popup-mask"
				@tap="closeFilter"
				catchtouchmove="true"
			></view>
		</view>
	</view>
</template>
<script>
import { getTargetDay } from '@/common/utils.js'
import getDateFn from '@/common/getDateFn.js'
import serachButton from '@/components/serach-button/serach-button.vue'
import segmentedControl from '@/subPackagesIndex/components/segmented-control/segmented-control.vue'
import { previewFile } from '@/common/utils.js'
import { fileTypeList } from './data'
export default {
	components: { segmentedControl, serachButton },
	data() {
		return {
			navHeight: 0,
			segmentedList: [
				{ text: '我发起的', value: 1, src: 'mySubmitFileData' },
				{ text: '我审批的', value: 2, src: 'myApproveFileData' },
			],
			activeSegmented: 1,
			activeFileType: '全部',
			fileTypeList,
			filterArr: [
				{
					type: 'fileType',
					name: '文件类别',
					checked: false,
				},
				{
					type: 'archiveTime',
					name: '归档时间',
					checked: false,
				},
			],
			currentFilterType: '',
			filterPopupShow: false,
			filterDateArr: [
				{
					name: '全部',
					value: '',
				},
				{
					name: '今日',
					value: 0,
				},
				{
					name: '昨日',
					value: -1,
				},
				{
					name: '近7日',
					value: -7,
				},
			],
			filterStartDate: '',
			filterEndDate: '',
			activeDay: '',
			fileData: [],
			pageIndex: 1,
			pageSize: 10,
			hasMore: false,
			fileName: '',
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
	},
	onReachBottom() {
		if (this.hasMore) {
			this.pageIndex = this.pageIndex + 1
			this.getDataList()
		}
	},
	onLoad() {
		this.getDataList()
	},
	methods: {
		previewFile(row) {
			previewFile(row.fileUrl)
		},
		getDataList() {
			uni.showLoading({
				title: '加载中...',
			})
			const src = this.segmentedList.find(
				(item) => item.value == this.activeSegmented
			).src
			this.$request
				.request(`wflow/wflow/seal/file/data/app/${src}`, {
					method: 'post',
					data: {
						fileName: this.fileName,
						fileType:
							this.activeFileType === '全部'
								? ''
								: this.activeFileType,
						startDate: this.filterStartDate,
						endDate: this.filterEndDate,
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
					},
				})
				.then((res) => {
					uni.hideLoading()
					if (res.status === 200) {
						console.log(res, '-----res---')
						if (res.data.data && res.data.data.length > 0) {
							this.fileData = this.fileData.concat(res.data.data)
							this.hasMore = true
						} else {
							this.hasMore = false
						}
					}
				})
		},
		serachInput(value) {
			this.pageIndex = 1
			this.fileData = []
			this.fileName = value
			this.getDataList()
		},
		chooseFileType(row) {
			this.activeFileType = row
		},
		//筛选时间
		choosefilterDate(row) {
			this.activeDay = row.value
			if (row.value !== '') {
				this.filterStartDate = getTargetDay(row.value)
				this.filterEndDate =
					row.value === -1
						? getTargetDay(row.value)
						: getDateFn.getDate()
			} else if (row.value === '') {
				this.filterStartDate = ''
				this.filterEndDate = ''
			}
		},
		// 选择开始时间
		chooseStartDate(event) {
			this.filterStartDate = event
			this.activeDay = ''
		},
		//选择结束时间
		chooseEndDate(event) {
			this.filterEndDate = event
			this.activeDay = ''
		},
		clickItem(row) {
			this.activeSegmented = row
			this.activeDay = ''
			this.filterStartDate = ''
			this.filterEndDate = ''
			this.fileName = ''
			this.activeFileType = '全部'
			this.pageIndex = 1
			this.fileData = []
			this.filterPopupShow = false
			this.setFilterBanner()
			this.getDataList()
		},
		//打开筛选框
		openFilter(row) {
			this.filterArr.forEach((item) => {
				item.checked = false
				if (row.type === item.type) {
					item.checked = true
				}
			})
			this.currentFilterType = row.type
			this.filterPopupShow = true
		},
		setFilterBanner() {
			this.filterArr.forEach((item) => {
				switch (item.type) {
					case 'archiveTime':
						if (
							this.activeDay !== '' ||
							(this.activeDay === '' && !this.filterStartDate)
						) {
							item.name = this.filterDateArr.find(
								(i) => i.value === this.activeDay
							).name
						}
						if (this.activeDay === '' && this.filterStartDate) {
							item.name = '自定义'
						}
						if (this.activeDay == '' && !this.filterStartDate) {
							item.name = '归档时间'
						}
						break
					case 'fileType':
						if (this.activeFileType === '全部') {
							item.name = '文件类别'
						} else {
							item.name = this.fileTypeList.find(
								(i) => i === this.activeFileType
							)
						}
						break
				}
			})
		},
		//关闭筛选框
		closeFilter() {
			this.currentFilterType = ''
			this.filterPopupShow = false
		},
		filterSubmit() {
			this.pageIndex = 1
			this.fileData = []
			this.setFilterBanner()
			this.getDataList()
			this.filterPopupShow = false
		},
		filterReset() {
			const type = this.currentFilterType
			switch (type) {
				case 'fileType':
					this.activeFileType = '全部'
					break
				case 'archiveTime':
					this.activeDay = ''
					this.filterStartDate = ''
					this.filterEndDate = ''
					break
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.container {
	padding: 24rpx;
	padding-top: 340rpx;
}
.card-content {
	border: 2rpx solid #efefef;
	border-radius: 10rpx;
	padding: 20rpx;
}
.data-picker-box {
	margin: 20rpx 30rpx 10rpx;
	border-radius: 6rpx;
	border: 2rpx solid rgba(217, 217, 217, 1);
	font-size: 32rpx;
}
.filter-item {
	background-color: rgba(239, 239, 239, 1);
	color: rgba(108, 108, 108, 1);
	border-radius: 8rpx;
	font-size: 30rpx;
}
.active-filter-item {
	color: #3a74fc;
	border: 2rpx solid #3a74fc;
	font-weight: 600;
	background: #fff;
}
.grid {
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-gap: 10rpx;
	padding: 20rpx 20rpx 20rpx 10rpx;
}
.c1 {
	color: #c1c1c1;
}
.item-form {
	background: #fbfbfb;
	font-size: 30rpx;
	text-align: center;
}
.item-form-active {
	background: #fff;
	color: #3a74fc;
	font-weight: 700;
}
</style>
